import React, { useContext, useMemo } from 'react';
import { QuickCodeContext } from './context';
import { useDrag, useDrop } from 'react-dnd';
import { DesignFrameworkContext } from '../design/context';
import { isEmptyArray } from '@/pages/quick-code/@quick-code/design/utils/array';
import { getComponentConfig, getId } from '../design/utils';
const Unknown = ({ item }: any) => {
  return <div>404-{item.component}</div>
}


const QuickCodeRender = ({ schema }: any) => {

  const { registerComponents,SingleRender,ItemRender } = useContext(QuickCodeContext)
  let RcComponent: any
  // let ChildrenWrap: any
  if (schema.component) {
    RcComponent = registerComponents[schema.component] || Unknown;

  }
  // if (schema.childrenWrap) {
  //   ChildrenWrap = registerComponents[schema.childrenWrap];

  // }



  if (getComponentConfig(RcComponent,'componentType')  === 'container' && (isEmptyArray(schema.children))) {

    schema.children = [{
      id: getId(),
      component: 'Placeholder'
    }]
  }
  return ItemRender ? <ItemRender $schema={schema}>
    <RcComponent SingleRender={SingleRender} $schema={schema}>
      {schema.children?.map((item) => {

        return  <QuickCodeRender key={item.id} schema={item} />
      })}

    </RcComponent>
  </ItemRender> : <RcComponent $schema={schema}>
    {schema.children?.map((item) => {
      return <QuickCodeRender key={item.id} schema={item} />
    })}

  </RcComponent>
}
export default QuickCodeRender